<template>
	<div class="sl_group_place__container">
    <div class="item" @click.once="selectedAddress">
      <icon :type="handleSly.icon" size="2" :style="{'color': handleSly.color}"></icon>
      <div class="title__cont">
        <div class="from">
          <span class="tag" v-if="this.type" :style="{'background': handleSly.color}">{{ handleSly.title }}</span>
          {{ place }}
        </div>
        <div class="to" v-if="placeDetail !== ''">
          <small>{{ placeDetail }}</small>
        </div>
      </div>
    </div>
    <div class="exit">
      <div class="exit-item" v-for="item in handleExits" @click.once="addressDetail(item)" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sl-group-place',
    props: {
      data: {},
      type: String, // 'default, common',
      exits: [Array, String],
      place: String,
      placeDetail: String
    },
    computed: {
      handleExits () {
        if (this.exits === '[]') {
          return []
        }
        if (typeof this.exits === 'string') {
          return this.exits.split(';')
        }
      },
      handleSly () {
        let sly = {
          title: '当前',
          icon: 'icon-dingwei',
          color: '#46a1bb'
        }
        switch (this.type) {
          case 'default':
            sly.title = '当前'
            sly.icon = 'icon-dingwei'
            sly.color = '#46a1bb'
            break
          case 'common':
            sly.title = '常用'
            sly.icon = 'icon-shijian2'
            sly.color = '#999'
            break
        }
        return sly
      }
    },
    methods: {
      selectedAddress () {
        this.$emit('selected', Object.assign(this.data, {
          addressDetail: `${this.data.name}`
        }))
      },
      addressDetail (item) {
        this.$emit('selected', Object.assign(this.data, {
          addressDetail: `${this.data.name} - ${item}`
        }))
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  .sl_group_place__container
    align-items center
    padding 1 * .61rem
    background #fff
    border-bottom 1px #ddd solid
    >span
      display block
    .item
      width 100%
      line-height 2 * .61rem
      display flex
      align-items center
      .icon
        width 2 * .61rem
        color: #46a1bb
        text-align center
      .title__cont
        margin-left 5px
        .from
          font-size $sl_font_size_14
          line-height 2 * .61
          color $sl_font_color_default
          .tag
            background #46a1bb
            padding .2 * .61rem
            border-radius 2px
            font-size $sl_font_size_small
            color: #fff
        .to
          color $sl_font_color_desc
          small
            font-size $sl_font_size_small
    .exit
      display flex
      padding-left 2 * .61rem
      flex-wrap wrap
      .exit-item
        width 25%
        margin-right 1.5 * .61rem
        margin-top 1 * .61rem
        padding 1 * .61rem .5 * .61rem
        box-sizing border-box
        border 1px solid #ddd
        border-radius 4px
        text-align center
        font-size $sl_font_size_14
        overflow hidden
        text-overflow ellipsis
        -webkit-line-clamp 1
        white-space nowrap
</style>
